<template>
	<view>
		<u-navbar title="邀请好友" rightText="规则" :placeholder="true" :autoBack="true"
			@rightClick="$fun.jump(`/pages/order/orderlist`)" style="font-weight: bold;" bgColor="#F2F2F2">
		</u-navbar>
		<view class="invite">
			<view class="invite_text1">好友注册领取收益奖励</view>
			<view class="invite_text2">邀请好友，您与好友皆可获得收益</view>
			<image src="../../static/my/nodata(2).png" mode=""></image>

		</view>
		<view class="btnsub" @click="show1=true">
			生成海报
		</view>
		<view class="invite_online flex-between">
			<view class="invite_online_text" @click="show = true">
				<image src="../../static/ercode.png" mode=""></image>
				<view class="">面对面邀请</view>
			</view>
			<view class="invite_online_text">
				<view class="copy flex">
					<view class="">YQ1234567</view>
					<image src="../../static/wallet/copy.png" @click="copy('111')" mode=""></image>
				</view>
				<view class="">邀请码</view>
			</view>
			<view class="invite_online_text">
				<view class="copy flex">
					<view class="" style="width: 148rpx;"><u--text :lines="1" size="12" color="#333333"
							:text="text"></u--text>
					</view>
					<image src="../../static/wallet/copy.png" @click="copy()" mode=""></image>
				</view>
				<view class="">邀请链接</view>
			</view>
		</view>
		<view class="invitename">我的邀请收益</view>
		<view class="invitebot flex-between">
			<view class="">我发出的邀请</view>
			<view class="">157人</view>
		</view>
		<view class="invitebot flex-between">
			<view class="">累计收益</view>
			<view class="">5,274.00</view>
		</view>
		<view class="invitebot flex-between">
			<view class="">成功邀请</view>
			<view class="">157人</view>
		</view>
		<u-overlay :show="show1" @click="show1 = false">
			<view class="model1">
				<!-- <view class="showservice1">
					<image src="../../static/my/nodata(1).png" mode=""></image>
					<uqrcode class="code" ref="uqrcode" canvas-id="qrcode" size="45" value="https://uqrcode.cn/doc" :options="{ margin: 0 }"></uqrcode>
				</view>
				<image class="del" @click="show = false" src="../../static/my/del.png" mode=""></image> -->
				<view class="showservice1" @longpress="save">
					<image :src="path" mode="widthFix"></image>
					<l-painter ref="poster" :board="poster" isCanvasToTempFilePath @success="path = $event"
						custom-style="position: fixed; left: 200%" />
				</view>
			</view>
		</u-overlay>
		<u-overlay :show="show" @click="show = false">
			<view class="model">
				<view class="showservice">
					<view class="name">邀请好友扫码</view>
					<view class="flex" style="justify-content: center;">
						<uqrcode ref="uqrcode" canvas-id="qrcode" size="120" value="https://uqrcode.cn/doc"
							:options="{ margin: 0 }"></uqrcode>
					</view>
				</view>
				<image class="del" @click="show = false" src="../../static/my/del.png" mode=""></image>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import env from '@/util/env.js';
	import image1 from '../../static/my/nodata(1).png';
	export default {
		data() {
			return {
				show: false,
				show1: false,
				path: '',
				text: '关于uView的取名来由，首字母u来自于uni-app首字母，uni - app是基Vuejs， Vue和View(延伸为UI、 视图之意) 同音， 同时view组件uni - app中最础最重要的组件， 故取名uView， 表达源于uni -app和Vue之意， 同时在此也对它示感谢。 ',
				poster: {
					css: {
						width: "600rpx",
						paddingBottom: "40rpx"
					},
					views: [{
						css: {
							marginTop: "0rpx",
							padding: "20rpx",
							boxSizing: "border-box",
							background: "#fff",
							borderRadius: "24rpx",
							width: "600rpx",
							height: "730rpx",
							boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
						},
						views: [{
								src: image1,
								type: "image",
								css: {
									objectFit: "cover",
									objectPosition: "50% 50%",
									width: "560rpx",
									height: "710rpx"
								},
							},
							{
								views: [{
									text: "http://192.168.1.8:8080/#/pages/my/invitefriends",
									type: "qrcode",
									css: {
										width: "90rpx",
										height: "90rpx",
										position: 'absolute',
										bottom: '20rpx',
										right: '10rpx'
									},

								}],
								type: "view"
							}
						],
						type: "view"
					}]
				}
			}
		},
		onLoad() {
			this.$fun.ajax.post('config/invitation', {}).then(res => {
				if (res.code == 1) {
					let data = []
					res.data.forEach((item) => {
						data.push(this.$fun.imgUrl(item.image))
					})
					res.data.map((item) => {
						item.image = env.dev.baseUrl + item.image +
							`?timestamp= ${Date.now()}`
					})
					this.imgbox = data
					this.list = res.data
					this.poster.views[0].views[0].src = this.urlToFile(`${res.data[0].image}`)
					console.log(this.urlToFile(`${res.data[0].image}`))
				}
			})
		},
		methods: {
			// 下载图片
			urlToFile(url) {
				return new Promise((resolve) => {
					uni.getImageInfo({
						src: url,
						success(res) {
							console.log(res)
							resolve(res.path)
						},
						fail(res) {
							console.log('fail -> res', res)
							uni.showToast({
								title: '网络异常',
								duration: 2000,
								icon: 'none'
							})
						}
					})
				})
			},
			save() {
				this.$refs.poster.canvasToTempFilePathSync({
					fileType: "png",
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath);
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								console.log('save success');
								uni.showToast({
									title: '保存成功'
								})
							}
						});

						// H5 提示用户长按图另存
						// #ifdef APP

						// #endif
						// 非H5 保存到相册
						// #ifdef H5
						uni.showToast({
							title: '长按保存',
							icon: 'none'
						})
						// #endif
					},
				});
			},
			copy(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						this.showToast && uni.$u.toast('复制成功')
					},
					fail: () => {
						this.showToast && uni.$u.toast('复制失败')
					},
					complete: () => {
						// this.showTooltip = false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.invite {
		width: 500rpx;
		margin: 30rpx auto;
		text-align: center;

		&_text1 {
			font-weight: 500;
			font-size: 48rpx;
			color: #19181A;
		}

		&_text2 {
			font-weight: 400;
			font-size: 28rpx;
			color: #19181A;
			margin-top: 16rpx;
		}

		image {
			width: 500rpx;
			height: 367rpx;
			margin: 30rpx 0;
		}
	}

	.btnsub {
		width: 690rpx;
		height: 88rpx;
		line-height: 80rpx;
		text-align: center;
		background: $uni-color-primary;
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 0 auto;
	}

	.invite_online {
		margin: 30rpx 30rpx 60rpx;

		&_text {
			image {
				width: 60rpx;
				height: 60rpx;
			}

			width: 216rpx;
			height: 134rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			text-align: center;
			padding: 20rpx 15rpx;
			box-sizing: border-box;

			.copy {
				margin-left: 5rpx;
				margin-bottom: 26rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-left: 6rpx;
				}
			}
		}
	}

	.invitename {
		font-weight: 500;
		font-size: 32rpx;
		color: #19181A;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	}

	.invitebot {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		width: 690rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		margin: 0 auto 20rpx;
	}

	.model {
		position: fixed;
		top: 30%;
		left: 195rpx;

		.del {
			width: 53rpx;
			height: 53rpx;
			position: absolute;
			bottom: -80rpx;
			left: 154rpx;
		}
	}

	.showservice {
		width: 360rpx;
		height: 420rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #19181A;
		text-align: center;

		.name {
			font-weight: 500;
			font-size: 28rpx;
			color: #19181A;
			margin: 0 0 30rpx;
			padding-top: 40rpx;
		}

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 10rpx;
		}
	}

	// .model1{
	// 	position: fixed;
	// 	top: 30%;
	// 	left: 75rpx;
	// 	.del{
	// 		width: 53rpx;
	// 		height: 53rpx;
	// 		position: absolute;
	// 		bottom: -80rpx;
	// 		left: 254rpx;
	// 	}
	// 	.code{
	// 		position: absolute;
	// 		right: 20rpx;
	// 		bottom: 26rpx;
	// 	}
	// }
	// .showservice1{
	// 	image{
	// 		width: 600rpx;
	// 		height: 730rpx;
	// 		border-radius: 24rpx;
	// 	}
	// }
	.model1 {
		position: fixed;
		top: 25%;
		left: 75rpx;

		.del {
			width: 53rpx;
			height: 53rpx;
			position: absolute;
			bottom: -80rpx;
			left: 254rpx;
		}

		.code {
			position: absolute;
			right: 20rpx;
			bottom: 26rpx;
		}
	}

	.showservice1 {
		image {
			width: 600rpx;
			height: 730rpx;
			border-radius: 24rpx;
		}
	}
</style>